<template>
  <div class="dataCount" lang="zh">
  <!-- <div class="dataCount" lang="zh-cmn-Hans"> -->
    <van-tabs type="card" v-model="tabName" @change="handleChange" background="#DFECF6" color="#007AE6" :border="false">
      <van-tab v-for="item in tabsType" :title="item.label" :key="item.value">
        <DataContent v-if="item.visible" :timeType="item.type" :visible="item.visible" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
const tabsType = [
  { type: 0, label: '日', visible:false, value: 'day' },
  { type: 1, label: '周', visible:false, value: 'week' },
  { type: 2, label: '月', visible:false, value: 'month' },
]
import DataContent from './dataContent'
export default {
  data() {
    return {
      tabsType,
      tabName: ''
    }
  },
  components: {
    DataContent
  },
  created() {
    let type = this.$route.query.type || 0
    console.log(this.$route.query)
    tabsType.forEach((item, index) => {
      item.visible = false
      if (item.type == type)  {
        item.visible = true
        this.tabName = item.type
      }
    })
  },
  methods: {
    handleChange(type) {
      this.$router.replace('/dynamics/dataCount')
      this.tabsType.forEach(item => {
          item.visible = false
        if (item.type === type) {
          item.visible = true
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .van-tabs__nav--card {
  border-radius: 4px;
  border-color: #DFECF6!important;
  .van-tab {
    color: #292E33!important;
    border: none;
    border-radius: 4px;
  }
  .van-tab--active {
    color: #fff!important;
  }
}

.dataCount {
  padding: 12px 0;
  background: #F9FAF9;
}

</style>

